<template>
  <Layout :showHome="false" title="首页" :showD="true">
    <div class="container">
      <!-- 搜索栏 -->
      <div class="bar">
        <van-search v-model="value" placeholder="请输入搜索关键词" shape="round"/>
        <van-icon name="envelop-o" size="20" @click="show = true" :dot="dot"/>
      </div>
      <!-- 消息提示 -->
      <van-popup v-model="show" position="right" :style="{ height: '100%', width: '60%' }" >
        <van-panel v-for="item in list" :key="item.id" :title="item.title" :desc="item.desc" :status="((item.status && '已读') || '未读')">
          <template #footer>
            <van-button v-if="item.status === 0" size="small" type="danger" block plain @click="read(item.id)">确认</van-button>
          </template>
        </van-panel>
      </van-popup>
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#f56e00">
        <van-swipe-item><img src="../../images/home/swipe1.png" alt=""></van-swipe-item>
        <van-swipe-item><img src="../../images/home/swipe2.png" alt=""></van-swipe-item>
      </van-swipe>
      <!-- 快捷入口 -->
      <div class="quick">
        <div class="icon">
          <img src="../../images/home/home-icon1.png" alt="" @click="registerActive">
          <span>个体工商注册</span>
        </div>
        <router-link class="icon" to="sign">
          <img src="../../images/home/home-icon2.png" alt="">
          <span>签约信息</span>
        </router-link>
        <div class="icon">
          <img src="../../images/home/home-icon3.png" alt="" @click="$router.push('/project')">
          <span>交付物管理</span>
        </div>
      </div>
      <!-- 注册流程 -->
      <h4>注册流程</h4>
      <div class="register">
        <van-steps :active="active" active-color="#f56e00">
          <van-step v-for="item in register" :key="item.state">
            <van-icon :name="item.icon" size="36" @click="sign(item.state)"/>
            <p>{{item.name}}</p>
          </van-step>
          <!-- <van-step>
            <van-icon name="balance-pay" size="36" @click="$router.push('/pay')"/>
            <p>绑定银行卡</p>
          </van-step> -->
          <!-- <van-step>
            <van-icon name="records" size="36" @click="$router.push('/sign/cont')"/>
            <p>签约</p>
          </van-step> -->
        </van-steps>
      </div>
      <!-- 热门任务 -->
      <div class="task">
        <router-link to="/hall"><img src="../../images/home/home-task1.png" alt=""></router-link>
        <router-link to="/hall"><img src="../../images/home/home-task2.png" alt=""></router-link>
        <router-link to="/hall"><img src="../../images/home/home-task3.png" alt=""></router-link>
      </div>
    </div>
  </Layout>
</template>

<script>
import { editMessageApi, UserApi } from '../../apis/signApi'

export default {
  data () {
    return {
      userId: 1,
      // 搜索词
      value: '',
      // 注册流程
      active: '',
      // 流程
      register: [
        { name: '实名认证', state: 0, icon: 'friends-o' },
        { name: '绑定银行卡', state: 1, icon: 'balance-pay' },
        { name: '签约', state: 2, icon: 'records' }
      ],
      // 消息提示框
      show: false,
      message: [],
      dot: false,
      list: []
    }
  },
  created () {
    this.getUserInfo(this.userId)
  },
  methods: {
    async getUserInfo (id) {
      this.$store.commit('common/setUserId', this.userId)
      const result = await UserApi(id)
      /* if (result.code !== 200) {
        this.$toast.fail('获取用户信息失败')
        return
      } */
      this.active = result.active
      this.message = result.message
      this.list = [...this.message].reverse()
      this.dot = this.message.some(item => {
        return item.status === 0
      })
    },
    sign (state) {
      if (state === this.active) {
        if (state === 0) {
          this.$router.push('/real')
        } else if (state === 1) {
          this.$router.push('/pay')
        } else if (state === 2) {
          this.$router.push('/sign/cont')
        }
      } else {
        if (this.active === 0) {
          this.$toast.fail('请完成实名认证')
        } else if (this.active === 1) {
          this.$toast.fail('请完成绑定银行卡')
        } else if (this.active === 2) {
          this.$toast.fail('请完成签约')
        }
      }
    },
    registerActive () {
      if (this.active === 0) {
        this.$router.push('/real')
      } else if (this.active === 1) {
        this.$router.push('/pay')
      } else if (this.active === 2) {
        this.$router.push('/sign/cont')
      }
    },
    async read (id) {
      this.message.filter(item => {
        if (item.id === id) {
          item.status = 1
        }
      })
      await editMessageApi(this.userId, this.message)
      this.dot = this.message.some(item => {
        return item.status === 0
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../style/common.less";

.container{
  padding: 0 20px;
  .bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
    .van-search{
      width: 80vw;
    }
  }
  .my-swipe .van-swipe-item {
    margin-top: 10px;
    color: #fff;
    font-size: 20px;
    line-height: 80px;
    text-align: center;
    background-color: #fff;
    img{
      width: 100%;
    }
  }
  .quick{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    .icon{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img{
        width: 56px;
        height: 56px;
      }
      span{
        margin-top: 5px;
        font-size: 14px;
        color: @c2;
      }
    }
  }
  h4{
    font-size: 1rem;
    font-weight: normal;
    color: @c1;
    margin-bottom: 10px;
  }
  .register{
    height: 100px;
    box-shadow: 0px 0px 5px rgb(217, 216, 216);
    margin-top: 15px;
    .van-step{
      &:nth-child(1) .van-icon{
        margin-left: 8px;
      }
      &:nth-child(2) .van-icon{
        margin-left: 15px;
      }
      &:nth-child(3) .van-icon{
        margin-left: -3px;
      }
      p{
        font-size: 14px;
        margin: 0;
      }
    }
  }
  .task{
    display: flex;
    height: 19rem;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 20px;
    padding-bottom: 70px;
    img{
      width: 90vw;
      border-radius: 10px;
      box-shadow: 5px 5px 10px #cee1fc;
    }
    .van-popup{
      padding: 10px;
      padding-top: 20px;
    }
  }
}
</style>
